<template>
  <div class="jsons-componet">
    <i class="el-icon-document" @click="copyjson($event)" :id="copyId"  :data-clipboard-text="JSON.stringify(jsondata)"></i>
    <div class="json-view-container" >
      {{jsondata}}
    </div>
  </div>
  
</template>
<script>
import jsonview from 'jsonview'
import Clipboard from 'clipboard'
export default {
  name: "Jsonview",
  props:{
    jsondata:{
      type:Object,
      default:function(){
        return {
          name:'joe',
          age:100
        }
      }
    }
  },
  data () {
    return {
      dom:null,
      copyId:'copy-btn-'+new Date().valueOf()
    };
  },
  computed:{
       
  },
  mounted(){
    let vm =this
    console.log(vm.$el)
    vm.dom = $(vm.$el)
    console.log(vm.dom)  
    vm.dom.find('.json-view-container').JSONView(vm.jsondata,{
      collapsed: false
    })   
    this.$nextTick(function(){
      new Clipboard('.el-icon-document')
    })
    
  },
  methods:{
    // chilFn(msg){
    //   console.log(msg)
    //   let vm =this
    //   this.jsondata=msg
    //   vm.dom.JSONView(vm.jsondata,{
    //     collapsed: false
    //   }) 
    // }  
    copyjson(e){
      let vm = this
      
      // let clipboardObj=  new Clipboard(vm.copyId)
      // clipboardObj.on('success',function(e){
      //   console.log( e.text )
      // })
      // new Clipboard(vm.copyId,{
      //   text:function(trigger){
      //     console.log(trigger)
      //     return 1
      //   }
      // })
    },  
  },
}
</script>
<style lang="scss" scoped>
.jsons-componet{
  position: relative;
  i.el-icon-document{
    position: absolute;
    right: 5px;
    top:5px;
    cursor: pointer;
  }
}
</style>